<template>
    <div class="main">
        <div>
            用户管理
        </div>
        <div class="content">
            <div>
                <div style="margin-top: 15px;">
                    <el-input placeholder="请输入用户名或邮箱账号" v-model="page.keyword" class="input-with-select"> 
                        <el-button slot="append" primary @click="getTableInfo">搜索</el-button>
                        <el-button slot="append" @click="$router.go(0)">重置</el-button>
                    </el-input>
                </div>
            </div>
            <div>
                <el-table :data="this.userList" border style="width: 100%" stripe>
                    <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
                    <el-table-column prop="userName" label="用户名" width="100"></el-table-column>
                    <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
                    <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
                    <el-table-column prop="userType" label="性别" width="50">
                         <template slot-scope="scope">
                            <span>{{scope.row.userType == 1 ? '男' : '女'}}{{state}}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="remark" label="签名" width="100"></el-table-column> -->
                    <el-table-column prop="state" label=" 状态" width="100">
                        <template slot-scope="scope">
                            <span><el-tag>{{scope.row.state == 1 ? '启用' : '禁用'}}{{state}}</el-tag></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="superAdmin" label=" 角色" width="120">
                        <template slot-scope="scope">
                            <span><el-tag>{{scope.row.superAdmin == 1 ? '管理员' : '普通用户'}}</el-tag></span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="spiderId" label="源" width="100"></el-table-column> -->
                    <el-table-column fixed="right" label="操作" width="100" >
                        <!-- <template slot-scope="scope"> -->
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="deleteUserDeleteByIdsResource(scope.row.id)">删除</el-button>
                            <el-button type="text" size="small" @click="syncUserInfo(scope.row.id,scope.row.state,scope.row.superAdmin)">管理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :hide-on-single-page="pagehide"
                        :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, prev, pager, next, sizes" :total="this.page.total"> </el-pagination>
            </div>
        </div>
        <div>
            <el-dialog title="用户管理" :visible.sync="centerDialogVisible" width="30%" center>
                    <div id = "my_dialog">
                        <el-form>
                            <el-form-item label="状 态:">
                                <el-select v-model="userInfo.state" placeholder="请选择用户状态">
                                    <el-option label="启用" value="1"></el-option>
                                    <el-option label="禁用" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="角 色:">
                                <el-select v-model="userInfo.superAdmin" placeholder="请选择用户角色">
                                    <el-option label="管理员" value="1"></el-option>
                                    <el-option label="普通用户" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="centerDialogVisible = false ; updateUserInfo()">修 改</el-button>
                    </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import LogoSrc from '@/assets/icon/comic.png'
import Api from '@/api/index';

export default {
  name: 'User',
  data () {
    return {
        logo: LogoSrc,
        centerDialogVisible: false,
        //分页参数
        page: {
            index: 1,
            size: 10,
            total: 0,
            keyword: '',
        },
        //用户列表
        userList: [],
        //用户信息
        userInfo: {
            id: 0,
            superAdmin: 0,
            state: 0,
        },
    }
  },
  computed:{
        // num2不是函数
        pagehide:{
            // 当计算属性要修改时先触发set方法
            // 读取当前计算属性的值，get方法可以隐藏，默认进入的是get方法
            get:function(){
                if(this.page.total <= 0){
                    return true;
                }else{
                    return false;
                }
            },
            // set:function(val){
            //     this.num = val;
            //     console.log('val',val)
            // }
        }
    },
  methods: {
      //分页值修改
    handleSizeChange(val) {
        this.page.size=val;
        this.getTableInfo();
    },
    handleCurrentChange(val) {
        //当前为第几页时调用getTabelInfo()显示第几页数据
        this.page.index=val;
        this.currentPage=val;
        this.getTableInfo();
    },
    //获取用户信息数据
    getTableInfo(){
        // 初始化界面,获取登录用户信息
        Api.getUserFindListPageResource(this.page.index, this.page.size, this.page.keyword).then(response => {
            if(response.data.code = 200){
                this.userList = response.data.data.data
                this.page.total = Number(response.data.data.total)              
            }
        })
    },
    /** 修改用户信息 */
    updateUserInfo(){
        Api.getUserSaveOrUpdateResource(this.userInfo).then(response => {
            if(response.data.code == 200){
                this.$notify({
                    title: '提示',
                    message: "修改成功",
                    position: 'bottom-left',
                    type: 'success'
                });
                this.$router.go(0)
            }
            },error => {
            //获取搜索内容
            this.$notify({
                    title: '提示',
                    message: '修改失败',
                    position: 'bottom-left',
                    type: 'error'
                });
        })
    },
    //删除用
    deleteUserDeleteByIdsResource(ids){
        this.$confirm('是否确认删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            Api.getUserDeleteByIdsResource(ids).then(response => {
                if(response.data.code == 200){
                    this.$notify({
                        title: '提示',
                        message: "删除成功",
                        position: 'bottom-left',
                        type: 'success'
                    });
                    this.$router.go(0)
                }
                },error => {
                //获取搜索内容
                this.$notify({
                        title: '提示',
                        message: '删除失败',
                        position: 'bottom-left',
                        type: 'error'
                    });
            })
            // this.$message({
            //     type: 'success',
            //     message: '退成登录成功!'
            // });
        }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消退出登录'
        //   });          
        });
    },
    //同步信息到修改信息中
    syncUserInfo(userId,userState,userSuperAdmin){
        this.centerDialogVisible = true
        this.userInfo.id = userId
        this.userInfo.state = userState
        this.userInfo.superAdmin = userSuperAdmin
    }
  },
  mounted() {
        // 初始化界面,获取登录用户信息
        Api.getUserFindListPageResource(this.page.index, this.page.size, this.page.keyword).then(response => {
            if(response.data.code = 200){
                this.userList = response.data.data.data
                this.page.total = Number(response.data.data.total)              
            }
        })
    },
}
</script>

<style scoped>
.main{
    display: flex;
    flex-direction: column;
    /* justify-content: flex-start; */
    align-items: flex-start;
}
.el-avatar{
    box-shadow: 0px 0px 5px 1px rgb(223, 223, 223);
}
.main > div:nth-child(1){
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6em;
    margin: 0px 0px 30px 0px;
    font-weight: 1000;
}
.content{
    width: 100%;
    height: 100%;
}
.content > div:nth-child(1){
    width: 100%;
    height: min-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: 50px;
}
.content > div:nth-child(1) > div:first{
    width: 60%;
    margin: 0px 20px 0px 0px;
    display: flex;
    flex-direction: row;
}
.content > div:nth-child(3){
    width: 100%;
    height: min-content;
    margin-top: 30px;
}
#my_dialog{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* align-content: center; */
}
</style>